<template>
	<view class="list">
		<Header />
		<view class="list-main">
			<view class="list-l">
				<view class="l-item" v-for="item in firstCategoryList" :key="item.id" :class="current == item.id ? 'active' : ''" @click="handleClickFirstTab(item.id)">
					{{ item.categoryName }}
				</view>
			</view>
			<view class="list-r">
				<scroll-view scroll-y="true" :style="'height:' + height + 'px'">
					<view class="r-img">
						<image src="/static/tabbar/home_click.png" mode=""></image>
					</view>
					<view class="r-main">
						<view class="r-main-item" v-for="(item, index) in secondCategoryList" :key="index">
							<!-- <image :src="item.thumbnail" mode=""></image> -->
							<image src="/static/tabbar/home_click.png" mode=""></image>
							<text>{{ item.categoryName }}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import Header from '@/components/common/Header.vue';
import { getFirstCategorys, getSecondCategorys } from '@/api/course.js';
import { mixin } from '../../mixins/mixin';
export default {
	mixins: [mixin],
	components: {
		Header
	},
	data() {
		return {
			height: 0,
			current: -1,
			firstCategoryList: [
				{
					id: -1,
					categoryName: '全部'
				}
			],
			secondCategoryList: [],
			categoryParams: {
				categoryId: -1
			}
		};
	},
	onReady() {
		this.height = this.getHeight('.header-search');
	},
	onLoad() {
		getFirstCategorys().then((res) => {
			this.firstCategoryList = [...this.firstCategoryList, ...res.list];
		});
		this.getSecondCategoryList();
	},
	methods: {
		handleClickFirstTab(id) {
			this.current = id;
			this.categoryParams.categoryId = this.current;
			this.getSecondCategoryList();
		},
		getSecondCategoryList() {
			getSecondCategorys(this.categoryParams).then((res) => {
				this.secondCategoryList = res.list;
			});
		}
	}
};
</script>

<style scoped>
.list-main {
	display: flex;
	justify-content: space-between;
}
.list-l {
	width: 217rpx;
	background: rgba(247, 249, 255, 0.39);
	line-height: 77rpx;
	font-size: 28rpx;
	color: #777777;
	text-align: center;
}
.l-item {
	margin: 30rpx 0;
}
.list-r {
	flex: 1;
	display: flex;
	flex-direction: column;
	/* align-items: center; */
}

.r-img {
	padding: 0 34rpx;
}
.r-img image {
	width: 479rpx;
	height: 192rpx;
	border-radius: 17rpx;
}
.r-main {
	display: flex;
	flex-wrap: wrap;
}
.r-main-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 33.33%;
	margin-top: 44rpx;
	padding: 18rpx 0;
}
.r-main-item image {
	width: 83rpx;
	height: 83rpx;
}
.r-main-item text {
	font-size: 24rpx;
	color: #a9a9a9;
}

.active {
	position: relative;
	color: #3780ef;
	font-weight: 400;
}

.active:before {
	content: '';
	/* 绝对定位设置光标位置 */
	position: absolute;
	left: 0;
	top: 50%;

	width: 6rpx;
	height: 40%;
	transform: translateY(-50%);
	background: rgba(55, 128, 239, 0.27);
	border: 1rpx solid #0065ff;
	opacity: 1;
	border-radius: 3rpx;
}
</style>
